import React,{Component} from 'react'
import * as pub from '../../config/public';
import * as fetch from '../../config/fetch';
import $ from 'jquery'
import {message} from 'antd'
//import {browserHistory} from 'react-router'
class SingleQuestion extends Component {
	constructor(args) {
		super();
	}
	delThis(number){
		$('#SingleQuestion' + number).remove();
	}
	render(){
		return(
			<div className="topic-cont SingleQuestion" id={'SingleQuestion' + this.props.number}>
				<h5><label>
				题目</label>
				<input required="required" className="question" type="text"/></h5>
				<dl className="clearFix mar-t-20">
					<dt>选项</dt>
					<dd>
						<ul>
							<li><label>A</label><input required="required" className="describeA" type="text"/></li>
							<li><label>B</label><input required="required" className="describeB" type="text"/></li>
							<li><label>C</label><input required="required" className="describeC" type="text"/></li>
							<li><label>D</label><input required="required" className="describeD" type="text"/></li>
						</ul>
					</dd>
				</dl>
				<dl className="clearFix mar-t-20">
					<dt>答案</dt>
					<dd><label>
					<input  required="required" type="radio" name={'single_answer'+this.props.number}/>A</label><label>
					<input  type="radio" name={'single_answer'+this.props.number}/>B</label><label>
					<input  type="radio" name={'single_answer'+this.props.number}/>C</label><label>
					
					<input  type="radio" name={'single_answer'+this.props.number}/>D</label></dd>
					<a className='answers'><span></span></a>
				    {/*<a className='delete-question' onClick={()=>this.delThis(this.props.number)}><i className='icon-trash'></i></a>*/}
				</dl>
			</div>
			)
	}
}
class MultipleQuestion extends Component {
	constructor(args) {
		super();
	}
	delThis(number){
		$('#MultipleQuestion' + number).remove();
	}
	render(){
		return(
			<div  className="topic-cont MultipleQuestion" id={'MultipleQuestion' + this.props.number}>
				<h5>
					<label>题目</label>
					<input required="required" className="question" type="text"/>
				</h5>
				<dl className="clearFix mar-t-20">
					<dt>选项</dt>
					<dd>
						<ul>
							<li><label>A</label><input required="required" className="describeA" type="text"/></li>
							<li><label>B</label><input required="required" className="describeB" type="text"/></li>
							<li><label>C</label><input required="required" className="describeC" type="text"/></li>
							<li><label>D</label><input required="required" className="describeD" type="text"/></li>
						</ul>
					</dd>
				</dl>
				<dl className="clearFix mar-t-20">
					<dt>答案</dt>
					<dd><label>
					<input type="checkbox"/>A</label><label>
					<input type="checkbox"/>B</label><label>
					<input type="checkbox"/>C</label><label>
					<input type="checkbox"/>D</label></dd>
				 {/* <a className='answers'><img src={require('../../style/images/icon_✔️@2x.png')} alt='test'/></a>*/}
 					<a className='answers'><span></span></a>
				   {/*<a className='delete-question' onClick={()=>this.delThis(this.props.number)}><i className='icon-trash'></i></a>*/}
				</dl>
				<div></div>
			</div>
			)
	}
}

class RandomAnswerRecord extends Component {
	constructor(args) {
		super()
		this.state = {
			singleList:[],
			multipleList: [],
			categoriesList:[],
			courseattach:[],
            answerScore:0,
            singleNum:0,
            multipleNum:0,
            loading:false,
		}
			
	}
    componentWillMount(){
		this.selectBigTestExamDetail()
    }	
    selectBigTestExamDetail() {
    	pub.loading(this,true);
		fetch.selectRandomTestExamDetail({randomPaperId:this.props.params.id}).then((data) => {
			if(data.result === "RC100"){
				pub.loading(this,false);
				let single = [],
				multiple = [];
				for (let x of data.titleList) {
					if (x.titleType === '1') {
						single.push(x);
					} else {
						multiple.push(x);
					}
				}
				this.setState({
					course: data.examRecords,
					singleNum: single.length,
					multipleNum: multiple.length,
				}, () => {
					
					$('.SingleQuestion').each(function(i) {
						$(this).find('.question').val(single[i].title);
						$(this).find('.describeA').val(single[i].A);
						$(this).find('.describeB').val(single[i].B);
						$(this).find('.describeC').val(single[i].C);
						$(this).find('.describeD').val(single[i].D);
						if(single[i].isTrue === 1 ){
							$(this).find('.answers').addClass('imgRight');
						}else{
							$(this).find('.answers').addClass('imgWrong')
						}
						let answer = pub.getAnswer(single[i].chooseAnswer);
						$(this).find("input[type='radio']").each((index, el) => {
							for(let x of answer){
								if(x === index){
									el.checked = true;
								}
							}
						})
			
					})
					
					$('.MultipleQuestion').each(function(i) {
						if(multiple[i] !== undefined){
							$(this).find('.question').val(multiple[i].title);
							$(this).find('.describeA').val(multiple[i].A);
							$(this).find('.describeB').val(multiple[i].B);
							$(this).find('.describeC').val(multiple[i].C);
							$(this).find('.describeD').val(multiple[i].D);
							if(multiple[i].isTrue === 1 ){
							$(this).find('.answers').addClass('imgRight');
						}else{
							$(this).find('.answers').addClass('imgWrong')
						}
							let answer = pub.getAnswer(multiple[i].chooseAnswer);
							$(this).find("input[type='checkbox']").each((index, el) => {
								for(let x of answer){
									if(x === index){
										el.checked = true;
									}
								}
							})
						}
						
	
					})
					
				})
			}else{
				message.error(data.errMsg, 3);
				pub.loading(this,false);
			}
		}, (res) => {
			pub.reject(res);
			pub.loading(this,false);
		})
	}
	result(flag) {
		this.setState({
			result: flag
		})
	}
	render() {
		let course = this.state.course || [];
		return (
			<div className="container">
				<div className="common-title">答题历史<h1>得分：{course.answerScore}</h1></div>
					<div className="row bg-FFFFFF box-shadow mar-t-20 pad-l-20 pad-r-20">
		
						<h3 style={{borderBottom:'1px solid #DEE6F4',padding:'10px'}} className="mar-b-20">答题情况</h3>
						{
							this.state.singleNum !==0 ?
								<div className="topic radio-topic mar-b-20">
								    <h3>单项选择题：</h3>
								  {/* {this.state.singleList.map((item,index)=>{
								    	return(
								  	       <dl key={index}>
								  	       	<dt>{index + 1}、{item.title}</dt>
								  	       	<dd><label><input type="radio" name={"radio" + index} disabled="disabled"/>A.{item.A}</label></dd>
								  	       	<dd><label><input type="radio" name={"radio" + index} disabled="disabled"/>B.{item.B}</label></dd>
								  	       	<dd><label><input type="radio" name={"radio" + index} disabled="disabled"/>C.{item.C}</label></dd>
								  	       	<dd><label><input type="radio" name={"radio" + index} disabled="disabled"/>D.{item.D}</label></dd>
								  	       </dl>
								    		)
								   })}*/}
								   {pub.getObject(this.state.singleNum).map((item,index)=>{
										return(
											  	<SingleQuestion key={index} number={index + 1}/>
											)
									})}
								</div>
							:null
						}
						
						{
							this.state.multipleNum !== 0 ?
								<div className="topic check-topic">
								    <h3>多选选择题：</h3>
								    {pub.getObject(this.state.multipleNum).map((item,index)=>{
										return(
											  	<MultipleQuestion key={index} number={index + 1}/>
											)
									})}
								</div>
							:null
						}
	
					</div>

			</div>

		)
	}

}
export default RandomAnswerRecord

